<template>
  <div class="sendShell">
    <router-link
      class="backIndexShell"
      :to="{ name: 'postItem', params: { id: $route.params.id } }"
    >
      <span class="iconfont backIndex">&#xe621;</span>
    </router-link>
    <!--发送帖子内容-->
    <div class="sendTitle">Change Your Message</div>
    <a-textarea
      class="postTitle"
      v-model="postTitle"
      placeholder="在此输入标题"
      auto-size
    />
    <a-textarea
      class="postContent"
      v-model="postContent"
      placeholder="文由心生"
      :auto-size="{ minRows: 3, maxRows: 7 }"
    />
    <!--上传图片-->
    <div class="postPic">
      <img :src="postPicUrl" alt="" />
    </div>
    <a-upload
      name="file"
      action="/baseApi/api/nos/upload/image"
      @change="changePic"
      :showUploadList="false"
    >
      <span class="iconfont sendPostUpload">&#xe63e;</span>
    </a-upload>
    <div class="postPicRule"><span>单张图片不可超过5Mb</span></div>
    <!--选择专题-->
    <a-select
      show-search
      placeholder="选择一个专题"
      option-filter-prop="children"
      style="width: 160px"
      @change="changeTopic"
      v-model="selTopic"
    >
      <a-select-option value="1"> 二手 </a-select-option>
      <a-select-option value="2"> 程序员 </a-select-option>
      <a-select-option value="3"> 交友 </a-select-option>
      <a-select-option value="4"> 美妆 </a-select-option>
      <a-select-option value="5"> 热点 </a-select-option>
      <a-select-option value="7"> 体育 </a-select-option>
      <a-select-option value="8"> 寻物 </a-select-option>
      <a-select-option value="9"> 桌游 </a-select-option>
      <a-select-option value="10"> 教育 </a-select-option>
      <a-select-option value="11"> 科技 </a-select-option>
      <a-select-option value="12"> NBA </a-select-option>
      <a-select-option value="13"> 股票 </a-select-option>
      <a-select-option value="14"> 星座 </a-select-option>
      <a-select-option value="16"> 健康 </a-select-option>
      <a-select-option value="18"> 二次元 </a-select-option>
    </a-select>
    <!--发送-->
    <div class="sendBtnShell">
      <van-button class="sendConfirm" type="default" @click="sendConfirm"
        >确认修改</van-button
      >
    </div>
  </div>
</template>
<script>
import { changePost, postDetail } from "@/api/api";
export default {
  name: "ChangePost",
  components: {},
  data() {
    return {
      // 选择的专题
      selTopic: "",
      // 上传图片的地址
      postPicUrl: "",
      postTitle: "",
      postContent: "",
      postId: "",
    };
  },
  methods: {
    // 上传图片
    changePic(info) {
      if (info.file.status === "done") {
        this.$message.success(`图片上传成功`);
        this.postPicUrl = info.file.response.url;
      } else if (info.file.status === "error") {
        this.$message.error(`图片上传失败`);
      }
    },
    // 选择专题
    changeTopic(value) {
      this.selTopic = value;
    },
    //修改帖子
    sendConfirm() {
      changePost(
        this.postId,
        this.postTitle,
        this.selTopic,
        this.postContent,
        this.postPicUrl
      ).then((res) => {
        this.$router.replace(`/postItem/${this.$route.params.id}`);
      });
    },
  },
  created() {
    postDetail(this.$route.params.id).then((res) => {
      this.postPicUrl = res.data.data.coverImgUrl;
      this.postTitle = res.data.data.title;
      this.postContent = res.data.data.intro;
      this.selTopic = res.data.data.categoryId;
      this.postId = res.data.data.postsId;
    });
  },
};
</script>

<style scoped lang="less">
@import "../assets/fonts/fonts.css";
.sendShell {
  margin: 20px 20px 0 20px;
  .backIndexShell {
    .backIndex {
      font-size: 35px;
    }
  }
  .sendTitle {
    margin-top: 20px;
    font-family: "playball";
    font-size: 24px;
  }
  .postTitle {
    margin: 15px 0 10px;
    width: 95%;
  }
  .postContent {
    width: 95%;
  }
  .postPic {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    height: 100px;

    margin-top: 15px;
    img {
      height: 100%;
    }
  }
  .sendPostUpload {
    font-size: 30px;
  }
  .postPicRule {
    margin-top: 10px;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 10px;
  }
  .sendBtnShell {
    display: flex;
    justify-content: center;
    .sendConfirm {
      background-color: #000;
      color: #fff;
      border-radius: 20px;
      width: 70%;
      position: absolute;
      bottom: 50px;
    }
  }
}
</style>